<template>
	<view class="index">
		<view class="home_tab">
			<view class="home_tab_title">
				<view class="title_inner">
					<uni-segmented-control
					:current="current" 
					:values="items.map(v => v.title)" 
					@clickItem="changeHandle"
					styleType="text"
					activeColor="#d4237a"
					>
					</uni-segmented-control>
				</view>
				<view class="iconfont iconsearch"></view>
			</view>
			<view class="home_tab_content">
				<view v-show="current === 0">
					<recommend></recommend>
				</view>
				<view v-show="current === 1">
					<category></category>
				</view>
				<view v-show="current === 2">
					<news></news>
				</view>
				<view v-show="current === 3">
					<album></album>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import recommend from './recommend/index.vue'
	import category from './category/index.vue'
	import news from './news/index.vue'
	import album from './album/index.vue'
	export default {
		components: {
			recommend,
			category,
			news,
			album
		},
		data() {
			return {
				items:[
					{title: '推荐'},
					{title: '分类'},
					{title: '最新'},
					{title: '专辑'}
				],
				current: 0
			}
		},
		methods: {
			changeHandle(e) {
				if(this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		},
		watch: {
			current() {
				switch (this.current) {
					case 0:
						return uni.setNavigationBarTitle({
							title: "推荐"
						});
					break
					case 1:
						return uni.setNavigationBarTitle({
							title: "分类"
						});
					break
					case 2:
						return uni.setNavigationBarTitle({
							title: "最新"
						});
					break
					case 3:
						return uni.setNavigationBarTitle({
							title: "专辑"
						});
					break
				}
			}
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss">
	.home_tab{
	  .home_tab_title{
	    position: relative;
	    .title_inner{
	      width: 60%;
	      margin: 0 auto;
	    }
	    .iconsearch{
	      position: absolute;
	      top: 50%;
	      transform: translateY(-50%);
	      right: 5%;
	    }
	  }
	  .home_tab_content{}
	}
</style>
